<style>

  <!-- .btn-default {
    background: #fff;
  } -->

</style>
<section class="content-header">
  <h1>
    任务
    <small>Task panel</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
    <li class="active">任务</li>
  </ol>
</section>

<section class="content">
  <div class="row">
    <section class="col-lg-12 connectedSortable">
      <!-- Custom tabs (Charts with tabs)-->
      <div class="nav-tabs-custom">
        <!-- Tabs within a box -->
        <ul class="nav nav-tabs">
          <li class="active"><a href="javascript:void(0)" data-toggle="tab" data-target="#task-info">任务情况</a></li>
          <li><a href="javascript:void(0)" data-toggle="tab" data-target="#task-config">周期任务配置</a></li>
          <!-- <li class="pull-left header"><i class="fa fa-inbox"></i> Sales</li> -->
        </ul>
        <div class="tab-content">
          <!-- 任务情况 -->
          <div class="tab-pane active" id="task-info" style="position: relative;" ng-controller="taskInfoCtrl">
            <div style='margin-bottom: 15px'>
              <button class='btn btn-primary' style='margin-right: 5px' ng-click='build()'>
                <i class='fa fa-play-circle-o'></i> 启动</button>
              <!-- <button class='btn btn-danger' ng-click='stop()'><i class='fa fa-pause-circle-o'></i> 暂停</button> -->
              <!-- {{fields.selected}} -->
              <!-- <select multiple="multiple" ng-model='fields.selected'>
                <option ng-repeat='item in fields.all' ng-value='item'>
                  {{item}}
                </option>
              </select> -->
              <ui-select multiple ng-model="fields.selected" theme="bootstrap" close-on-select="false" style='display:inline-block; position:absolute; right: 0; margin-bottom: 5px; max-width:60%'>
                <ui-select-match placeholder="选择显示字段">{{$item.name.length>2?($item.name|limitTo:2)+'..':$item.name }}</ui-select-match>
                <ui-select-choices repeat='field in fields.all'>
                  {{field.name}}
                </ui-select-choices>
              </ui-select>
              <!-- {{fields.selected}} -->
            </div>
            <!-- 等待 {{prepare}} -->
            <!-- 运行 {{running}} -->
            <!-- 完成 {{complete}} -->
            <!-- box -->
            <!-- 等待队列 -->
            <div class="box">
              <!-- box-header -->
              <div class="box-header">
                <h5 class="box-title">等待运行的项目</h5>
                <span class="label label-warning">{{prepare.result.length}}</span>
                <div class="box-tools">
                  <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <!-- box-body -->
              <div class="box-body no-padding">
                <table class="table">
                  <tr>
                    <th style=""><input type='checkbox' ng-model='prepare.checked' ng-click='selectall(prepare)' /></th>
                    <th ng-repeat='field in fields.selected'>
                      {{field.name}}
                    </th>

                  </tr>
                  <tr ng-repeat='pl in prepare.result'>
                    <td>
                      <input type='checkbox' ng-model='pl.checked' ng-checked='pl.checked'/>
                    </td>
                    <td ng-repeat='field in fields.selected'>
                      <!-- {{pl[field.value]}} -->
                      <span ng-if='field.value!="status"'>
                         {{pl[field.value]}}
                       </span>
                       <span ng-if='field.value=="status"'>
                         <span class="label label-warning">等待中</span>
                         <!-- <span class='label label-warning' ng-show='cl[field.value]=="取消"'>已取消</span>
                         <span class='label label-default' ng-show='cl[field.value]=="完成"'>已完成</span> -->
                       </span>
                    </td>
                  </tr>
                </table>
              </div>
              <!-- box-footer -->
              <div class="box-footer">
                <button class="btn btn-default btn-sm"><i class='fa fa-close'></i> 取消</button>
              </div>
            </div>
            <!-- 进行队列 -->
            <div class="box">
              <!-- box-header -->
              <div class="box-header">
                <h5 class="box-title">正在运行的项目</h5>
                <span class="label label-info">{{running.result.length}}</span>
                <div class="box-tools">
                  <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <!-- box-body -->
              <div class="box-body no-padding">
                <table class="table">
                  <tr>
                    <th style=""><input type='checkbox' ng-model='running.checked' ng-click='selectall(running)' /></th>
                    <th ng-repeat='field in fields.selected'>
                      {{field.name}}
                    </th>

                  </tr>
                  <tr ng-repeat='rl in running.result'>
                    <td>
                      <input type='checkbox' ng-model='rl.checked' ng-checked='rl.checked'/>
                    </td>
                    <td ng-repeat='field in fields.selected'>
                      <span ng-if='field.value!="status"'>
                        {{rl[field.value]}}
                      </span>
                      <span ng-if='field.value=="status"'>
                        <!-- <span ng-if='rl[field.value]>80' class='badge bg-aqua'>{{rl[field.value]}}%</span>
                        <span ng-if='rl[field.value]<=80&&rl[field.value]>20' class='badge bg-yellow'>{{rl[field.value]}}%</span>
                        <span ng-if='rl[field.value]<=20' class='badge bg-red'>{{rl[field.value]}}%</span> -->
                        <span class="label label-info">运行中</span>
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
              <!-- box-footer -->
              <div class="box-footer">
                <button class="btn btn-default btn-sm"><i class='fa fa-pause-circle-o'></i> 暂停</button>
              </div>
            </div>
            <!-- 完成队列 -->
            <div class="box">
              <!-- box-header -->
              <div class="box-header">
                <h5 class="box-title">已经完成的项目</h5>
                <span class="label label-primary">{{complete.result.length}}</span>
                <div class="box-tools">
                  <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <!-- box-body -->
              <div class="box-body no-padding">
                <table class="table">
                  <tr>
                    <th style=""><input type='checkbox' ng-model='complete.checked' ng-click='selectall(complete)' /></th>
                    <th ng-repeat='field in fields.selected'>
                      {{field.name}}
                    </th>

                  </tr>
                  <tr ng-repeat='cl in complete.result'>
                    <td>
                      <input type='checkbox' ng-model='cl.checked' ng-checked='cl.checked'/>
                    </td>
                    <td ng-repeat='field in fields.selected'>
                      <span ng-if='field.value!="status"'>
                         {{cl[field.value]}}
                       </span>
                       <span ng-if='field.value=="status"'>
                         <span class="label label-primary">已完成</span>
                         <!-- <span class='label label-warning' ng-show='cl[field.value]=="取消"'>已取消</span>
                         <span class='label label-default' ng-show='cl[field.value]=="完成"'>已完成</span> -->
                       </span>
                    </td>
                  </tr>
                </table>
              </div>
              <!-- box-footer -->
              <div class="box-footer">
                <button class="btn btn-default btn-sm"><i class='fa fa-trash-o'></i> 删除</button>
              </div>
            </div>

          <!-- box -->
          </div>

          <!-- 任务配置 -->
          <div class="chart tab-pane" id="task-config" style="position: relative;" ng-controller="taskSetCtr">
            <!-- <div class="box-header with-border">
              <h3 class="box-title">{{title}}</h3>
            </div> -->
            <!-- /.box-header -->
            <!-- form start -->

            <!-- box -->
            <div class="box">
              <div class="box-header">
                <h5 class="box-title">已有的周期任务</h5>
                <!-- <button ng-click="getTaskList()">加载列表</button> -->
                <div class="box-tools">
                  <button class="btn btn-success btn-sm" ng-click="openPeriodicTaskSet('','new_task')">添加周期任务</button>
                  <button type="button" class="btn btn-sm  btn-box-tool pull-right" data-widget="collapse" style='margin-left:15px'><i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="box-body no-padding" ng-show="tasks.length">
              <!-- {{tasks}} -->
                <table class="table ">
                  <tr>
                    <th>
                      <input type="checkbox">
                    </th>
                    <th style="">
                    包含分组
                    </th>
                    <th>
                      优先级
                    </th>
                    <th class="">
                    周期
                    </th>
                    <th>激活</th>
                    <th>操作</th>
                  </tr>
                  <tr ng-repeat="task in tasks track by $index">
                    <td style="vertical-align: middle;">
                      <input type="checkbox">
                    </td>
                    <td style="vertical-align: middle;">
                    <span  ng-repeat="grp in task.group">{{grp.groupID}}
                    <br></span>
                    </td>
                    <td style="vertical-align: middle;">
                      {{task.previous | timeFilter:priorities}}
                    </td>
                    <td>
                      <div ng-show="task.time.month.length">
                        <span>运行月份：&nbsp;&nbsp;</span>
                        <span style="background-color: #d2d6de" ng-repeat="m in task.time.month | timeFilter:months">
                     {{m}} &nbsp;&nbsp;</span>
                      </div>
                     <!-- <p class="">运行月份： <p class="pull-right"><span class="label label-default" ng-repeat="m in task.time.month | timeFilter:months">
                     {{m}}</span><br></p></p> -->
                      <div ng-show="task.time.day.length">
                        <span>运行周几：&nbsp;&nbsp;</span>
                        <span style="background-color: #d2d6de" ng-repeat="m in task.time.day | timeFilter:weeks">{{m}} &nbsp;&nbsp;</span>
                      </div>
                      <div ng-show="task.time.date.length">
                        <span>运行天数：&nbsp;&nbsp;</span>
                        <span style="background-color: #d2d6de" ng-repeat="m in task.time.date | timeFilter:days">{{m}} &nbsp;&nbsp;</span>
                      </div>
                      <div ng-show="task.time.hour.length">
                        <span>运行小时：&nbsp;&nbsp;</span>
                        <span style="background-color: #d2d6de" ng-repeat="m in task.time.hour | timeFilter:hours">{{m}} &nbsp;&nbsp;</span>
                      </div>
                    </td>
                    <td style="vertical-align: middle;">
                      <input type="checkbox">
                    </td>
                    <td style="vertical-align: middle;">
                      <span style="cursor: pointer;" ng-click="openPeriodicTaskSet(task,'edit_task')">
                      <i class="fa fa-edit"></i>编辑</span>
                    </td>
                  </tr>
                  <tr>
                  <td colspan="5"><button class="btn btn-danger btn-sm"><i class="fa fa-trash"></i>删除</button></td>
                  </tr>
                </table>
              </div>
            </div>
          <!-- box -->

          </div>
        </div>
      </div>
      <!-- /.nav-tabs-custom -->
    </section>
  </div>
</section>
